import { message } from 'antd';
import axios from 'axios';
import React, { useEffect, useState } from 'react';
import { Navigate } from 'react-router-dom';

export default function RequireAuth(props) {
    // 1. 接收到被守卫的组件对象  props.children
    const [isLogin, setIsLogin] = useState(false);
    // 用于标记是否已经完成了登录状态验证的请求，避免重复请求等情况
    const [isChecked, setIsChecked] = useState(false);

    useEffect(() => {
        // 2. 判断用户登录状态 
        const guard = async () => {
            let userInfo = localStorage.getItem('travel-user-info'); // 提取本地存储
            if (userInfo) {
                let { token } = JSON.parse(userInfo);
                let url = `http://localhost:3000/users/auth?token=${token}`;
                try {
                    // 请求token认证接口
                    const res = await axios.get(url);
                    let { code, msg } = res.data;
                    if (code === 1) {
                        setIsLogin(true);
                    } else {
                        message.error(msg);
                    }
                } catch (error) {
                    console.error('验证登录状态出错', error);
                } finally {
                    setIsChecked(true);
                }
            } else {
                setIsChecked(true);
            }
        };
        guard();
    }, []); // 空依赖数组，意味着只在组件挂载时执行一次该副作用

    // 3. 根据登录状态决定是不是允许用户访问【被守卫的组件】
    if (!isChecked) {
        return null; // 在还没完成验证时先不渲染任何内容，避免出现不符合预期的渲染情况
    }
    return isLogin? props.children : <Navigate to="/login" />;
}